devfandomcom-20200223-history
Global Lua Modules/Math-colors
This module makes it painless to create a math expression with a custom background color, text color, or both—all without sacrificing readability on mobile devices. Rationale Introduction The tag accepts a subset of AMS-LaTeX markup , and transforms it into a PNG image on the server. Unfortunately, these PNGs use binary transparency, which means that the anti-aliasing around letters and numbers is opaque and based on the provided background color. If the background color of your expression does not match the background color of its container, people will see a "halo" effecthttps://www.w3.org/Conferences/WWW4/Papers/53/gq-trans.html: Changing the background color By adding the code \pagecolorRGB{red, green, blue} to the beginning of an expression, you can change its background color—provided red, green, and blue are all integers from 0 through 255. If no background color is given, white (255, 255, 255) is used instead. Note that the "halo" effect can still happen if you aren't careful: Changing the text color Being able to change an expression's background color is nice, but not very useful unless you can also change its text color. Fortunately, the syntax {\colorRGB{red, green, blue} expression} lets you do just that! In this case, red, green, and blue are identical to their \pagecolor counterparts, while expression is the text you want colored. If no text color is given, black (0, 0, 0) is used instead. Combining the \pagecolor and \color commands is totally possible, and looks something like this: \pagecolorRGB{red, green, blue}{\colorRGB{red, green, blue} expression} Note that nothing will be rendered if the background color and text color are identical: Portability In addition to Oasis and Monobook, Fandom wikis have a mobile skin called "Mercury", which does a number of things differently in order to stay fast. One of the most important changes is the removal of nearly all CSS; style sheets like MediaWiki:Common.css are not loaded on Mercury, and inline CSS is actively stripped out before it reaches the user. What this means for the tag is that you can't change the container's background color on mobile devices—it will always be white there. In turn, that means that using a custom background color in your expression will always cause the "halo" effect on Mercury. This doesn't mean that you should eschew color altogether, though! You can use the hidden class, which makes its content invisible on the Mercury skin, to create a second version of your expression that works on mobile: \pagecolorRGB{red, green, blue}{\colorRGB{red, green, blue} expression} expression This creates two elements, which are inline by default, just like the tag. The first one contains our colored expression, and has the hidden class to make it invisible for mobile users. It also has the style display: inline;, to ensure that it's visible outside of Mercury. Our second contains the plain, mobile-only expression. It has the style display: none; to ensure that it's only visible on mobile devices. Simplicity Of course, it's a pain to write all of that out by hand. This module makes your life easier by abstracting away those hard parts, leaving behind a clear interface for colored expressions. If you need the extra power, you can even load it from inside another module! Installation If you want to use Math-colors inside of another module, then you can require() it without any hassle: local mathColors = require("Dev:Math-colors") -- use mathColors here... However, you'll have to do a bit more work if you want it in an article. First, create a page on your wiki called "Module:Math-colors", and add the following text: return require("Dev:Math-colors") Then you can #invoke it like so: This syntax is a pain to write, and can be a little intimidating—especially to newcomers. If you plan on using Math-colors a lot, you should store it in a template: Usage mathColors.render() local mathColors = require("Dev:Math-colors") local myMath = mathColors.render({ expression = "x = \\frac{-b \\pm \\sqrt{b^2 - 4ac} }{2a}", bgColor = "255, 0, 0", textColor = "0, 255, 255" }) mathColors.main() References